<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
	<link rel="stylesheet" href="/css/main.css">
	<style>
		
		
	</style>
	
  </head>
  <body>
    <div class="buttons-tab fixed-tab" data-offset="44">
      <a href="#tab1" class="tab-link active button">全部</a>
      <a href="#tab2" class="tab-link button">待付款</a>
      <a href="#tab3" class="tab-link button">待发货</a>
    </div>

    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          <div class="buttons-row">
            <a href="#tab1-1" class="tab-link active button">Tab 1</a>
            <a href="#tab1-2" class="tab-link button">Tab 2</a>
            <a href="#tab1-3" class="tab-link button">Tab 3</a>
          </div>
          <div class="tabs">
            <p class='tab active' id='tab1-1'>This is tab 1-1 content</p>
            <p class='tab' id='tab1-2'>This is tab 1-2 content</p>
            <p class='tab' id='tab1-3'>13855589778</p>
          </div>
        </div>
      </div>
      <div id="tab2" class="tab infinite-scroll">
          <div class="my-list-block">
<div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div><div class="card facebook-card">

		<div class="my-footer-font1">陕西人都爱这一口 真材实料独门享受</div>
		
</div>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
            <div class="preloader">
            </div>
          </div>
      </div>
      <div id="tab3"  class="tab infinite-scroll">
          <div class="list-block">
            <ul class="list-container">
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
              <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
            </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
            <div class="preloader">
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
</div>


    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	
	<script>
		$(document).on("pageInit", function() {
      //多个标签页下的无限滚动
      var loading = false;
      // 每次加载添加多少条目
      var itemsPerLoad = 1;
      // 最多可加载的条目
      var maxItems = 100;
      var lastIndex = $('.my-list-block .card')[0].length;
      function addItems(number, lastIndex) {
        // 生成新条目的HTML
        var html = '';
		console.log("lastIndex "+lastIndex + " number"+number);
        for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
			$.get("/a.php",function(data){
			console.log(i);
				html += data;
				$('.infinite-scroll.active .my-list-block').append(html);
			
			});
        }
		console.log('nnn'+html);
        // 添加新条目
        
      }
      $(document).on('infinite', function() {
        console.log('AAAAAAAA')
		// 如果正在加载，则退出
        if (loading) return;
        // 设置flag
        loading = true;
        var tabIndex = 0;
        if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
          tabIndex = 0;
        }
        if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
          tabIndex = 1;
        }
        lastIndex = $('.my-list-block').eq(tabIndex).find('.card').length;
        // 模拟1s的加载过程
        setTimeout(function() {
          // 重置加载flag
          loading = false;
          if (lastIndex >= maxItems) {
            // 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
            // 删除加载提示符
            $('.infinite-scroll-preloader').eq(tabIndex).hide();
            return;
          }
          addItems(itemsPerLoad,lastIndex);
          // 更新最后加载的序号
          lastIndex =  $('.my-list-block').eq(tabIndex).find('.card').length;
          $.refreshScroller();
        }, 1000);
      });
  });
	</script>
 <script>$.init()</script>
  </body>
</html>